import React from 'react';
import {connect} from 'dva';
import moment from 'moment';
import {Col, Select, Row, Input, Tooltip} from 'antd';
import styles from './index.less';
import DetailModal from './components/DetailModal';
import Card from '../Card';
import EligibilityTable from './components/EligibilityTable';


const menuInfo = [
  {
    label: 'All Type',
    value: 'All Type',
  },
  {
    label: 'Ang Bao Free Play',
    value: 'Ang Bao Free Play',
  },
  {
    label: 'Birthday Rewards',
    value: 'Birthday Rewards',
  },
  {
    label: 'Bonus Rewards',
    value: 'Bonus Rewards',
  },
  {
    label: 'Cash Buy In Program',
    value: 'Cash Bu yIn Program',
  },
  {
    label: 'Concerts',
    value: 'Concerts',
  },
  {
    label: 'DoubleGD',
    value: 'DoubleGD',
  },
  {
    label: 'Events',
    value: 'Events',
  },
  {
    label: 'F&B',
    value: 'F&B',
  },
  {
    label: 'GD Redemptions',
    value: 'GD Redemptions',
  },
  {
    label: 'Gift Day',
    value: 'Gift Day',
  },
  {
    label: 'Member Upgrade Program',
    value: 'Member Upgrade Program',
  },
  {
    label: 'New Member Programs',
    value: 'New Member Programs',
  },
  {
    label: 'Others',
    value: 'Others',
  },
  {
    label: 'Premium Player Programs',
    value: 'Premium Player Programs',
  },
  {
    label: 'Roll & Earn Programs',
    value: 'Roll & Earn Programs',
  },
  {
    label: 'Tournaments',
    value: 'Tournaments',
  },
  {
    label: 'Travel Rewards',
    value: 'Travel Rewards',
  },
  {
    label: 'Hotel Offer',
    value: 'Hotel Offer',
  },
  {
    label: 'Attraction',
    value: 'Attraction',
  },
];

class EligibilityList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      detailModalFlag: false,
      detailInfo: [],
      menuKey: 'All Type',
      searchValue: '',
    };
  }

  componentDidMount() {
    const {dispatch} = this.props;
    dispatch({ type: 'customerView/fetchEligibilityList', payload: { cxmid: 110000050 } });
    dispatch({
      type: 'customerView/fetchGetCampaignTypeList',
      payload: {
        attrCode: 'CAMPAIGN_TYPE',
      },
    });
  }

  componentWillUnmount() {
    const {dispatch} = this.props;
    dispatch({type: 'customerView/eligibilityListSave', payload: []});
    this.setState({
      detailModalFlag: false,
      detailInfo: [],
      menuKey: 'All Type',
    });
  }

  showDetail = detail => {
    this.setState({
      detailModalFlag: true,
      detailInfo: detail,
    });
  };

  offDetail = item => {
    this.setState({
      detailModalFlag: item,
    });
  };

  onSearch = value => {
    const {customerView: {customerInfo: {customerId} = ''} = '', dispatch} = this.props;
    dispatch({type: 'customerView/fetchEligibilityList', payload: {cxmid: 110000050}});
    this.setState({
      searchValue: value,
    });
  };

  typeCheck = key => {
    const { dispatch} = this.props;
    dispatch({type: 'customerView/fetchEligibilityList', payload: {cxmid: 110000050}});
    this.setState({
      menuKey: key,
    });
  };

  packupShowRedemptionPeriod = (startTime, endTime) => {
    if (startTime && endTime) {
      return `${startTime}~${endTime}`;
    }
    return null;
  };

  dataSourceInfo = eligibilityList => {
    const dataSource = [];
    let key = 0;
    if (eligibilityList) {
      eligibilityList.forEach(item => {
        const startDate = item.redemptionStartDate
          ? moment(item.redemptionStartDate, 'YYYYMMDDhhmmss').format('DD-MMM-YYYY')
          : '';
        const endDate = item.redemptionEndDate
          ? moment(item.redemptionEndDate, 'YYYYMMDDhhmmss').format('DD-MMM-YYYY')
          : '';
        let smsMessage = '';
        if (item.sms && item.sms.length > 0) {
          item.sms.forEach(msg => {
            smsMessage += `${msg};`;
          });
        }
        let status = '#22B400';
        if (item.callRsvp && item.callRsvp === 'Confirmed') status = '#22B400';
        if (item.callRsvp && item.callRsvp === 'Consider') status = '#259DDB';
        if (item.callRsvp && item.callRsvp === 'No Answer') status = '#FFF631';
        if (item.callRsvp && item.callRsvp === 'Reject') status = '#AB74FA';
        if (item.callRsvp && item.callRsvp === 'Phone Not Valid') status = '#574EB0';
        if (item.callRsvp && item.callRsvp === 'DNC') status = '#C6002E';
        if (item.callRsvp && item.callRsvp === 'Not Call Yet') status = '#FB8305';
        const callInfo = {
          callRsvp: item.callRsvp,
          status,
        };
        const itemList = {
          key,
          SAS: item.sasCode,
          CMS: item.cmsCode,
          Type: item.campaignType,
          CALL: callInfo,
          SMS: smsMessage,
          startDate: item.redemptionStartDate,
          endDate: item.redemptionEndDate,
          Description: item.campaignName,
          Detail: {
            campaignName: item.campaignDetailName,
            SAS: item.sasCode,
            CMS: item.cmsCode,
            Category: item.campaignCat,
            Type: item.campaignType,
            Period: `${this.packupShowRedemptionPeriod(startDate, endDate)}`,
            Description: item.campaignDesc,
            packages: item.packages,
          },
        };
        key += 1;
        dataSource.push(itemList);
      });
    }
    return dataSource;
  };

  render() {
    const {detailModalFlag, detailInfo = '', menuKey, searchValue} = this.state;
    const {
      customerView: {eligibilityList = [], campaignTypeList = []},
    } = this.props;
    const dataSourceInfo = this.dataSourceInfo(eligibilityList);
    let newEligibilityList = [];
    if (dataSourceInfo && dataSourceInfo.length > 0) {
      dataSourceInfo.forEach(item => {
        if (menuKey && menuKey === item.Type) newEligibilityList.push(item);
      });
    }
    if (menuKey === 'All Type') newEligibilityList = dataSourceInfo;
    if (newEligibilityList && newEligibilityList.length > 0) {
      const lowSearchValue = searchValue.toLowerCase().trim() || '';
      const searchEligibilityList = [];
      newEligibilityList.forEach(item => {
        const campaignDescription = item.Description || '';
        const lowCampaignDescription = campaignDescription.toLowerCase().trim() || '';
        if (searchValue && lowCampaignDescription.search(lowSearchValue) !== -1) searchEligibilityList.push(item);
      });
      if (lowSearchValue !== '') newEligibilityList = searchEligibilityList;
    }
    const dataSource = newEligibilityList;
    const menu = campaignTypeList.map(item => (
      <Select.Option key={item.value}>
        {
          <Tooltip placement="left" title={item.value}>
            {item.value}
          </Tooltip>
        }
      </Select.Option>
    ));

    return (
      <Card className={styles.Eligibility}>
        <Row justify="center" align="middle">
          <Col span={6}>
            <div className={styles.eligibilityTitle}>ELIGIBILITY LIST</div>
          </Col>
          <Col span={18} align="right">
            <Row justify="center" align="middle" gutter={8}>
              <Col span={14} align="right">
                <Select
                  className={styles.titleSelect}
                  defaultValue="All Type"
                  onChange={this.typeCheck}
                  style={{width: '140px'}}
                >
                  {menu}
                </Select>
              </Col>
              <Col span={10} align="center">
                <Input.Search
                  allowClear
                  placeholder="Campaign Name"
                  onSearch={value => {
                    this.onSearch(value);
                  }}
                  enterButton
                />
              </Col>
            </Row>
          </Col>
        </Row>
        <Row style={{marginTop: '10px'}} justify="center" align="middle"/>
        <EligibilityTable
          dataSource={dataSource}
          showDetail={detail => this.showDetail(detail)}
        />
        <DetailModal
          detailModalFlag={detailModalFlag}
          detailInfo={detailInfo}
          offDetail={item => this.offDetail(item)}
        />
      </Card>
    );
  }
}

export default connect(({customerView}) => ({
  customerView,
}))(EligibilityList);
